## 当前版本 [0.8.x]
https://www.npmjs.com/package/aui-web-ele

## 组件文件
```html
<aux-view>
    <aux-view class="some"></aux-view>
</aux-view>
```

## 组件样式
组件样式浏览器使用

## 组件兼容
兼容到IE9

## 组件通用属性
``` 
props: 
    className { String } 组件内部class类名
```

## 定义组件

document.auiDefineElement

example
```javascript
let template = function (slot) {
    return `
<aux-view class="aux-text">${slot}</aux-view>
    `;
};

document.auiDefineElement("aux-text", {
    template: template,
    props: {
        "line": {
            "afterCreated": function(self, newval) {
                // element created 到 attached 之间 处理 dom
            },
            "observer": function(self, oldval, newval) {
                // attribute changed
            }
        }
    },
    created: function(self) {
        // element created
    }
});
```

## 组件生命周期

1. created:
2. attached:
3. attrChanged

```javascript
(function() {
    function defineCustomElement (name, defines) {
        document.registerElement(
            name,
            {
                prototype: Object.create(
                    HTMLElement.prototype, defines
                )
            }
        );
    };
    
    let matchExp = /\[\[([^\[\]]+)\]\]/g;

    let nextTick = function(cb) {
        cb();
    }

    let parseTemplate = function(defines, self, html) {
        return html.replace(matchExp, function($match, p1) {
            let ret = p1;
            if (!defines.computed) {
                defines.computed = {
                    $context: self
                };
            } else {
                defines.computed["$context"] = self;
            }
            if (aui && aui.utils && defines.computed) {
                ret = aui.utils.run(ret, defines.computed);
            }
            return ret;
        });
    }

    if (window && window.Vue) {
        nextTick = window.Vue.nextTick;
    }
    
    document.auiDefineElement = function(is, defines = {}) {
        let template = function() {
            return ``;
        }
        if (defines["template"] && {}.toString.call(defines["template"]) === '[object Function]') {
            template = defines["template"];
        }
        if (!defines.created) {
            defines.created = function() {
            }
        }
    
        if (!defines.attached) {
            defines.attached = function() {
            }
        }
    
        if (!defines.attrChanged) {
            defines.attrChanged = function() {
            }        
        }
    
        defineCustomElement(
            is,
            {                
                createdCallback: {value: function() {
                    let self = this;
                    self.$ele = {};
                    nextTick(function () {
                        self.innerHTML = parseTemplate(defines, self, template(self));
                        defines.created.bind(self)(self);
                        for (var propkey in defines.props) {
                            var attrName = defines.props[propkey]["attr"] || propkey;
                            if (defines.props[propkey]["afterCreated"]) {                           
                                defines.props[propkey]["afterCreated"](self, self.auiGetAttribute(attrName));
                            }
                        }
                    })
                }},
                attachedCallback: {value: function() {
                    let self = this;
                    defines.attached.bind(this)(self);
                }},
                attributeChangedCallback: {value: function(name, oldval, newval) {
                    let self = this;
                    if (defines.props && defines.props[name]) {
                        defines.props[name]["observer"](self, oldval, newval);
                    }
                    defines.attrChanged.bind(this)(self, name, oldval, newval);
                }}
            }
        );
        
        // document.createElement(is);
    }
})()
```

## 基础组件

### aux-text

<aup-table><template>
{
    ths: [["参数", "说明", "类型", "默认值", "版本"]],
    tds: [["line", "可以指定为多行", "String", "", ""]]
}
</template></aup-table>

[iframe src="../node_modules/aui-web-ele/tests/basic/text/index.html"]

#### 小程序

##### 单行
```xml
<aux-text>普通text组件测试</aux-text>
```

##### 多行
```xml
<aux-text line="3" cssapply="multi">普通多文本组件测试普sds通多文本组件sdsd测试普通多文本组件测试普通多文sdsds本组件测试普通多文本组件测试</aux-text>
```

### aux-date

<aup-table><template>
{
    ths: [["参数", "说明", "类型", "默认值", "版本"]],
    tds: [
        ["value", "时间 单位ms", "String", "", ""],
        ["format", "格式", "String", "", ""]
    ]
}
</template></aup-table>

```html
<aux-date id="date" value="1520469682541" format="Y-m-d h:i:s"></aux-date>
```

[iframe src="../node_modules/aui-web-ele/tests/basic/date/index.html"]

#### 小程序

### aux-button 

使用方法

```
<!-- button -->
<script src="{@path}/webcomponents/aux-button/index.js"></script>
<link rel="stylesheet" href="{@path}/webcomponents/aux-button/index.css">
```

<aup-table><template>
{
    ths: [["参数", "说明", "类型", "默认值", "版本"]],
    tds: [
        ["disabled", "禁用", "Boolean", "false", ""],
        ["loading", "显示loading状态", "Boolean", "false", ""],
        ["formType", "指定状态", "String", "(submit, reset)", "[plan]"]
    ]
}
</template></aup-table>

[iframe src="../node_modules/aui-web-ele/tests/basic/button/index.html"]  

#### 小程序  

### aux-image

<aup-table><template>
{
    ths: [["参数", "说明", "类型", "默认值", "版本"]],
    tds: [["src", "图片路径", "String", "", ""]]
}
</template></aup-table>

example:
```html
<aux-image src="https://static.zhilizhili.com/static/3828461873613813290.jpg"></aux-image>
```

[iframe style="height: 350px;" src="../node_modules/aui-web-ele/tests/basic/image/index.html"]

#### 小程序  

### aux-input

<aup-table><template>
{
    ths: [["参数", "说明", "类型", "默认值", "版本"]],
    tds: [
        ["value","value","String","",""],
        ["disabled", "是否禁用", "Boolean", "", ""]
    ]
}
</template></aup-table>

特色
- type=password时可以选用设置为真实内容的eye属性

[iframe src="../node_modules/aui-web-ele/tests/basic/input/index.html"]

#### 小程序  

<!-- ### aux-details

类似于html details标签

<aup-table><template>
{
    ths: [["参数", "说明", "类型", "默认值", "版本"]],
    tds: [["type", "type", "String", "", ""]]
}
</template></aup-table>

[iframe src="../node_modules/aui-web-ele/tests/basic/details/index.html"]

#### 小程序  

### aux-summary

类似于html summary标签 -->

### aux-scrollview [ stage-1 ]

#### 小程序

### aux-dropdown [> 0.7.10]

<aup-table><template>
{
    ths: [["参数", "说明", "类型", "默认值", "版本"]],
    tds: [["for", "指定for元素的id", "String", "", ""]]
}
</template></aup-table>

[iframe src="../node_modules/aui-web-ele/tests/basic/dropdown/index.html"]

#### 小程序

<p class="warning">暂时无法实现 hover outsideclick</p>

### aux-dialog 

类似于dialog标签

[iframe src="../node_modules/aui-web-ele/tests/basic/dialog/index.html"]

#### 小程序

### aux-visual-scroll  [> 0.7.8]

无限滚动组件

[iframe src="../node_modules/aui-web-ele/tests/basic/visual-scroll/index.html"]

### aux-switch

switch组件

[iframe src="../node_modules/aui-web-ele/tests/basic/switch/index.html"]

### aux-tab-nav

tab组件

[iframe src="../node_modules/aui-web-ele/tests/basic/tab/index.html"]

tab

### aux-preview [web is stage]

预览代码组件

可以拷贝code

<aup-table><template>
{
    ths: [["参数", "说明", "类型", "默认值", "版本"]],
    tds: [
        ["content", "预览code", "String", "", ""],
        ["type", "类型", "String", "markup", ""]
    ]
}
</template></aup-table>

#### 小程序

## 依赖组件

### aux-range-slider [> 0.5.9]

https://github.com/leongersen/noUiSlider

[iframe src="../node_modules/aui-web-ele/tests/basic/range-slider/index.html"]

### aux-slider [> 0.6.1]

https://pawelgrzybek.com/siema/

[iframe src="../node_modules/aui-web-ele/tests/basic/slider/index.html"]

## 业务组件

### aup-picker

https://ustbhuangyi.github.io/picker/

### aup-backtopv [stage 1]

### aup-datepicker

https://github.com/dbushell/Pikaday

### aup-timepicker

https://github.com/mtrdesign/mtr-datepicker

### aup-coutdown

60s秒倒计时

事件

mystart 倒计时开始事件

myend 倒计时结束事件

### auc-alert

```html
<auc-alert type="success">
  <header>成功提示的文案</header>  
  <div>文字说明文字说明文字说明文字说明文字说明文字说明</div>
<auc-alert>    
```

## vue组件

### number input spinner [stage 1]

解决input clear问题
```scss
.vnis input::-ms-clear {
    display: none;
}
```

https://github.com/krystalcampioni/vue-number-input-spinner/blob/master/src/components/NumberInputSpinner.vue


### cascade [stage 1]

https://alibaba.github.io/ice/#/component/cascaderselect

### loading [stage 1]

## css组件

### auc-tooltip

```xml
<div class="tooltip">
  <em class="hook-bottom hook-left"><em></em></em>
  <em class="hook-bottom hook-right"><em></em></em>
  <em class="hook-top hook-left"><em></em></em>
  <em class="hook-top hook-right"><em></em></em>
</div>
```

### auc-radio

example

```html
<div class="auc-radio">
    <input type="radio" id="f-option" name="selector">
    <label for="f-option">Pizza</label>
    <div class="check"></div>
</div>
```

[iframe src="../node_modules/aui-web-ele/tests/css/radio/index.html"]

### auc-checkbox 

example

```html
<div class="auc-checkbox">
    <input type="checkbox" id="f-option" name="selector">
    <label for="f-option">Pizza</label>
    <div class="check"></div>
</div>
```

[iframe src="../node_modules/aui-web-ele/tests/css/checkbox/index.html"]

### auc-list-menu

example

```html
<auc-list-menu open>
    <auc-item>item 1</auc-item>
    <auc-item>item 2</auc-item>
    <auc-item>
        item 3
        <auc-list-menu> 
            <auc-item>item 3.1</auc-item>
        </auc-list-menu>      
    </auc-item>
</auc-list-menu>
```

### auc-breadcrumb [stage 1]

example

```html
<auc-breadcrumb>
    <auc-item><a href="">link</a></auc-item>
    <auc-item>end</auc-item>
</auc-breadcrumb>  
```

### auc-step-bar [stage 1]

example

```html
<auc-step-bar>
    <auc-item><auc-shape type="circle">1</auc-shape></auc-item>
    <auc-item><auc-shape type="circle">2</auc-shape></auc-item>
    <auc-item><auc-shape type="circle">3</auc-shape></auc-item>
</auc-step-bar>    
```

[iframe src="../node_modules/aui-web-ele/tests/css/step-bar/index.html"]

### auc-card [> 0.8.6]

```html
<auc-card>
    <header>
        <auc-card-title></auc-card-title>
    </header>
    <div>
        haha
    </div>
    <auc-actions></auc-actions>
    <a href=""></a>
</auc-card>    
```

[iframe src="../node_modules/aui-web-ele/tests/css/card/index.html"]

### auc-grid

```twig
<div class="auc-grid"><div class="auc-grid__inner">
    {% for i in 0..120 %}
    <div class="auc-item"><div style="font-size: 14px">{{i}} row</div></div>            
    {% endfor %}
</div></div>   
```



```scss
.auc-grid {
    &__inner {
        font-size: 0;
        > .auc-item {
            display: inline-block;
        }        
    }
}
```

[iframe src="../node_modules/aui-web-ele/tests/css/grid/index.html"]


#### 小程序

```scss
$a-grid-gutter: 10;
a-grid {
    @extend .u-layout-flex.horizontal;
    @extend .u-layout-flex.wrap;
}
a-grid.a-grid-row-item-4 {
    $guttersAlllength: $a-grid-gutter * 3;
    > a-grid-item {
        width: calc(24.9% - #{($guttersAlllength / 4)}ppx);
    }
}

a-flexrow-center {
    @extend .u-layout-flex.horizontal;
    @extend .u-layout-flex.center;
}

a-flexcloumn-center {
    @extend .u-layout-flex.vertical;
    @extend .u-layout-flex.center;
}
```

对应的xml
```xml
<a-grid class="a-grid-row-item-4 a-menus">
    <block wx:for="{{menus}}" wx:for-item="menu">
    <a-grid-item class="a-menu-item">   
        content 
    </a-grid-item>
    </block>
</a-grid>
```


## 移动端

### aum-scroll

```html
<aum-scroll>
    <li>...</li>
    <li>...</li>
    ...
</aum-scroll>
```

[iframe src="../node_modules/aui-web-ele/tests/mobile/scroll/index.html"]